---
title: 主题与暗黑模式
---

## 使用官方主题

Univer 官方提供了两套主题，分别是 `defaultTheme` 和 `greenTheme`，他们在 `@univerjs/themes` 包中，你可以根据自己的需求选择其中一个主题。

<Callout>
  当未指定主题时，默认使用 `defaultTheme`。
</Callout>

### 安装主题插件

#### 预设模式

预设模式下，主题可以从 `@univerjs/presets` 包中导入：

```typescript
// import { defaultTheme } from "@univerjs/presets";
import { greenTheme } from '@univerjs/presets'

const { univer } = createUniver({
  theme: greenTheme,
  // theme: defaultTheme,
})
```

#### 插件模式

插件模式下，主题由 `@univerjs/themes` 包提供，你需要先安装该包。

```package-install
npm install @univerjs/themes
```

```typescript
import { greenTheme } from '@univerjs/themes'
// import { defaultTheme } from "@univerjs/themes";

const univer = new Univer({
  theme: greenTheme,
  // theme: defaultTheme,
})
```

## 自定义主题

只要创建一个符合 `Theme` 接口的对象，就可以自定义主题。请参考[这里](/reference/types/theme)来了解默认主题的变量是如何定义的。

```typescript title="custom-theme.ts"
import type { Theme } from '@univerjs/presets'
// import type { Theme } from "@univerjs/themes";

export const customTheme: Theme = {
  white: '#FEFEFE',
  black: '#1C1C1C',
  primary: {
    50: '#F6F5FF',
    100: '#EDEBFE',
    200: '#DCD7FE',
    300: '#CABFFD',
    400: '#AC94FA',
    500: '#9061F9',
    600: '#7E3AF2',
    700: '#6C2BD9',
    800: '#5521B5',
    900: '#4A1D96',
  },
  // ...
}
```

```typescript
// 在这里导入你自定义的主题
import { customTheme } from './custom-theme'

const univer = new Univer({
  theme: customTheme,
})
```

## 暗黑模式

Univer 支持暗黑模式，你可以通过配置 `darkMode` 属性为 `true` 来开启暗黑模式。

```typescript
new Univer({
  darkMode: true,
})
```

### Facade API

也可以通过 Facade API 来动态切换暗黑模式。

```typescript
// 打开暗黑模式
univerAPI.toggleDarkMode(true)

// 关闭暗黑模式
univerAPI.toggleDarkMode(false)
```
